
<div id="console"></div>

  <script type="text/javascript">
        function runCypher() {
            var cypher=$(this).text();
            if (cypher.indexOf(";")==-1) return;
            runConsole(cypher);
        }
        function addPlayButton() {
            var play=$('<div id="play-button" class="btn icon-play" title="Run Cypher Query"></div>')
            $("pre").mouseenter(function() {
                var pos={top:$(this).position().top+$(this).height()/2 -5,
                         left:$(this).position().left+$(this).width()/3 -5}; //+-10
                play.appendTo($(this)).css(pos) 
            });
            $("pre").mouseleave(function() {
               play.detach() 
            });

            $("code, pre").click(runCypher);
            play.click(function() { runCypher($(this).parent()) })
        }

   $(document).ready(function(){

          startConsole();
          addPlayButton();

      $('#detachConsole').on('click', function() {

         var win = window.open('/console?id=cineasts', 'Neo4j Console', 'width=800,height=600,dependent=yes');
         $('div.console').remove();
         $(this).remove();

         runConsole = function(cypher) {
            win.send(cypher);
         }

      });


      });

      function runConsole(cypher) {
          if (frames['neo4j-console']) {
            // console.log(frames['neo4j-console']);
              frames['neo4j-console'].send(cypher);
          }
      }
      function startConsole() {
          if (!frames['neo4j-console']) {
            var url = "/console?id=cineasts";
            var iframe = $('<iframe name="neo4j-console" width="100%" height="300" src="'+url+'"/>');
            $('#console').html(iframe);
          }
      }

</script>